<template>
  <div>
    <!-- 顶部栏 -->
    <van-nav-bar
      title="奈雪的茶"
      left-arrow
      fixed
      @click.left.native.capture="onBack"
      safe-area-inset-top
    >
    </van-nav-bar>
    <!-- 搜索栏 -->
    <div class="search">
      <div class="search_left">
        <img src="../assets/imgs/tabBar/drink_selected.png" alt="" />
        <span>一起喝</span>
      </div>
      <van-search
        placeholder="请输入搜索关键词"
        shape="round"
        @focus="$router.push('/search')"
      />
    </div>
    <!-- 地点方式 -->
    <div class="attr">
      <div class="attr_left">
        <router-link to="/geoloc">
          <h4>天津市和平区</h4>
        </router-link>
        <p>距离您1.2km</p>
      </div>
      <!-- 取餐方式 -->
      <div class="hk" @click="updataS" v-model="hk">
        <span v-bind:class="{ default: hk }">自取</span>
        <span v-bind:class="{ default: !hk }">外卖</span>
      </div>
    </div>
    <!-- 通知栏 -->
    <div class="notice" v-if="agree">
      <van-notice-bar
        left-icon="volume-o"
        :scrollable="false"
        color="#595757"
        background="#FFFFFF"
        style="width: 65vw"
      >
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item v-for="item in notice" :key="item.nid">
            <div>
              <img :src="noticeURL + item.pic" alt="" />
              <span>{{ item.content }}</span>
            </div>
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>
      <div class="more" @click="agree = false">
        <van-button
          type="whote"
          text="显示更多"
          style="border: none; background: #fff"
        />
      </div>
    </div>
    <!-- 消息详情 -->
    <div v-else class="detail">
      <div class="d1" v-for="item in notice" :key="item.nid">
        <div>
          <van-icon name="volume-o" size="1.3em" />
          <img :src="noticeURL + item.pic" alt="" />
          <span>{{ item.content }}</span>
        </div>
        <a href="">查看详情</a>
      </div>
      <div class="safe">
        <span>查看食品安全信息</span>
        <van-icon name="arrow" color="#8C919B" />
      </div>
      <div @click="agree = true" class="packUp">
        <span>收起</span>
        <van-icon name="arrow-up" color="#8C919B" />
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="box">
      <!-- 左侧导航选项 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.fname"
          v-for="item in type"
          :key="item.lid"
        />
      </van-sidebar>
      <!-- 右侧商品内容 -->
      <div
        v-if="activeKey == index"
        class="box_right"
        v-for="(item, index) in type"
      >
        <div v-if="index == 0">
          <!-- 首页轮播图 -->
          <van-swipe
            class="my-swipe"
            :autoplay="2000"
            indicator-color="white"
            v-if="swipeImg"
          >
            <van-swipe-item v-for="item in swipeImg.data" :key="item.sid">
              <img :src="swipeURL + item.image" alt="" />
            </van-swipe-item>
          </van-swipe>
          <!-- 店铺热销 -->
          <div class="favor">
            <h6>店铺热销</h6>
            <div class="favor_list">
              <div
                class="favor_list_1"
                v-for="item in recommend"
                @click="$router.push(`/pd/${item.l_lid}`)"
              >
                <div class="favor_img">
                  <img :src="shopURL + item.pic" alt="" />
                </div>
                <div class="favor_text">
                  <div class="van-ellipsis">
                    {{ item.names }}
                  </div>
                  <div>
                    <div>
                      <span>￥</span><span>{{ item.price }}</span>
                    </div>
                    <div>
                      <img
                        src="../assets/imgs/products/info-pic/add_card.png"
                        alt=""
                        srcset=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sidebar">{{ item.fname }}</div>
        <!-- 商品列表 -->
        <product-cell></product-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
import ProductCell from "../components/ProductCell.vue";
export default {
  components: { ProductCell },
  computed: {
    ...mapState(["swipeImg", "swipeURL", "shopURL", "noticeURL"]),
  },
  data() {
    return {
      tabPosition: "left",
      activeKey: 0,
      checked: false,
      active: "0",
      activeNames: ["1"],
      agree: true,
      hk: true, //取餐方式滑块
      type: [], //商品种类
      recommend: [], //推荐商品数据
      notice: [], //消息栏数据
    };
  },
  methods: {
    ...mapActions(["getSwipe"]),
    ...mapMutations(["updateShop"]),
    //返回上一页
    onBack() {
      this.$router.go(-1);
    },
    // 取餐方式切换
    updataS() {
      this.hk = !this.hk;
    },
    //获取消息栏数据
    getNotice() {
      const url = "tea/notice";
      this.axios.get(url).then((res) => {
        console.log("消息栏数据:", res);
        this.notice = res.data.data;
      });
    },
    //获取商品所有种类
    getType() {
      const url = "tea/type";
      this.axios.get(url).then((res) => {
        console.log("奶茶种类:", res);
        this.type = res.data.data;
      });
    },
    //获取商品数据
    getShops(fid = 1) {
      const url = `tea/list?fid=${fid}`;
      this.axios.get(url).then((res) => {
        console.log("商品信息", res);
        this.$store.commit("updateShop", res.data.data);
      });
    },
    //获取推荐商品的数据
    getRec() {
      const url = "tea/recommend";
      this.axios.get(url).then((res) => {
        console.log("推荐商品", res);
        this.recommend = res.data.data;
      });
    },
  },
  mounted() {
    this.getNotice();
    this.getSwipe();
    this.getShops();
    this.getType();
    this.getRec();
  },
  watch: {
    hk(newValue, oldValue) {
      console.log("hk", newValue);
    },
    //监听左侧导航行选项变化，实时监听更新数据
    activeKey(newValue) {
      console.log("左侧导航栏变化", newValue + 1);
      this.getShops(newValue + 1);
    },
  },
};
</script>

<style lang="scss">
// 滑块制作
.hk {
  width: 22vw;
  background-color: #f5f5f5;
  //border: 1px solid #626564;
  height: 8vw;
  line-height: 8vw;
  border-radius: 5vw;
  display: flex;
  span {
    line-height: 8vw;
    font-size: 3.5vw;
    color: #626564;
    transition: 0.2s linear;
    border-radius: 5vw;
  }
  span:nth-child(1) {
    width: 50%;
    padding-left: 2vw;
  }
  span:nth-child(2) {
    width: 50%;
    padding-right: 2vw;
  }
}
//滑块状态切换选中时的样式
.default {
  text-align: center;
  color: #fff !important;
  border-radius: 5vw;
  width: 70% !important;
  background-color: #242524;
}
// 搜索栏
.search {
  margin-top: 46px;
  display: flex;
  padding: 5vw 4vw 0;
  .search_left {
    height: 8vw;
    line-height: 8vw;
    width: 23vw;
    border: 1px solid #e6e8ea;
    background-color: #fff;
    padding: 1vw;
    border-radius: 8vw;
    text-align: center;
    img {
      width: 25%;
      vertical-align: middle;
    }
    span {
      font-size: 3vw;
    }
  }
  // 清除搜索栏默认内间距
  .van-search {
    padding: 0;
    margin-left: 8vw;
    width: 50vw;
  }
  .van-cell {
    line-height: 7vw;
  }
  .van-search__content--round {
    border: 1px solid #e6e8ea;
  }
}
// 地址+外卖自取
.attr {
  width: 90%;
  height: 50px;
  padding: 3vw 5vw;
  margin-top: 1vw;
  display: flex;
  justify-content: space-between;
  .attr_left {
    a {
      h4 {
        font-weight: 800;
        font-size: 16px;
        color: #000;
        margin-bottom: 2vw;
      }
    }
    p {
      font-size: 14px;
      color: grey;
    }
  }
}

// 商品页 新中式 轮播
.box {
  display: flex;
  margin-bottom: 50px;
  // 左侧选项框
  .van-sidebar {
    width: 28%;
    .van-sidebar-item {
      padding: 5vw 4vw;
      .van-sidebar-item__text {
        color: #707275;
        font-size: 4vw;
      }
    }
  }
  // 右侧商品展示
  .box_right {
    width: 70%;
    // 轮播图
    .my-swipe {
      width: 100%;
      img {
        width: 100%;
        display: block;
      }
    }
    // 猜你喜欢
    .favor {
      h6 {
        font-size: 12px;
        height: 20%;
        width: 100%;
        padding: 1vw;
        font-weight: 800;
      }
      .favor_list {
        display: flex;
        justify-content: space-between;

        .favor_list_1 {
          width: 33%;
          padding: 1vw;
          box-sizing: border-box;
          color: #242524;
          .favor_img {
            img {
              width: 100%;
              display: block;
            }
          }
        }
        .favor_text {
          div:first-child {
            font-size: 3.5vw;
          }
          div:last-child {
            display: flex;
            justify-content: space-between;
            font-size: 3.5vw;
            div:nth-child(2) {
              width: 5vw;
              img {
                width: 100%;
                display: block;
              }
            }
          }
        }
      }
    }
    //超值好喝
    .sidebar {
      margin-top: 2vw;
      color: #242524;
    }
  }
}

//消息栏样式
.notice {
  display: flex;
  justify-content: space-between;

  .notice-swipe {
    height: 40px;
    line-height: 40px;
    img {
      width: 6vw;
      vertical-align: middle;
    }
  }
  .more {
    width: 35vw;
    text-align: right;
    line-height: 40px;
    color: #626564;
    font-size: 4vw;
  }
}
//消息栏详情样式
.detail {
  color: #595757;
  position: absolute;
  z-index: 10;
  background: #fff;
  width: 100%;
  .d1 {
    display: flex;
    justify-content: space-between;
    font-size: 3.5vw;
    margin-top: 3vw;
    height: 10vw;
    line-height: 10vw;
    padding: 0 4vw;
    img {
      width: 8vw;
      vertical-align: middle;
    }
    a {
      color: #a7d500;
    }
  }
  .packUp {
    margin-top: 3vw;
    text-align: center;
  }
  .safe {
    margin-top: 3vw;
    span {
      color: #242524;
      font-size: 6vw;
    }
  }
}
</style>
